<template>
	<div class="homepage">
		<div class="banner-con">
			<img src="/home/banner.jpg?v=1.0.0" class="banner" />
			<!-- <img
				src="/home/banner_txt_ai.png"
				v-if="
					(userInfo.salesType && userInfo.salesType == '1') ||
					(globalOrg.salesType && globalOrg.salesType == '1')
				"
				class="banner_txt"
			/>
			<img src="/home/banner_txt.png" v-else class="banner_txt" /> -->
		</div>
		<a-row :gutter="15">
			<a-col :span="8" v-for="(item, index) in mixTopMenu" :key="index">
				<div class="mod-item" :class="{ official: isPro }">
					<a href="javascript:;" @click="skipPage(item)">
						<div class="flex flex-align-center" style="height: 100%">
							<img src="/home/icon01.png" class="icon" v-if="item.name == 'accountManage'" />
							<img src="/home/icon04.png" style="margin-top: 0;" class="icon" v-if="item.name == 'doctorManage'" />
							<img src="/home/icon02.png" style="margin-top: 10px;" class="icon" v-if="item.name == 'scheduleManage'" />
							<img src="/home/icon03.png" class="icon" v-if="item.name == 'sysManages'" />

							<div class="flex-1" style="margin-left: 48px; margin-top: 20px">
								<div class="title">{{ item.meta.title }}</div>
								<p v-if="item.name == 'accountManage'">患者列表</p>
								<p v-if="item.name == 'doctorManage'">医护列表</p>
								<p v-if="item.name == 'scheduleManage'">日程排班</p>
								<p v-if="item.name == 'sysManages'">机构管理/部门管理/基础信息/账户管理/权限设置</p>
								<p v-if="item.name == 'doExercise' && item.meta.permissionList == 'impromptuQA'">
									单选题/多选题/数字题/判断题/查看答题进度/查看统计排名
								</p>
								<p v-if="item.name == 'doExercise' && item.meta.permissionList == 'quiz'">
									随堂检测/发送试题/查看答题进度/及时生成分析报告
								</p>
								<p v-if="item.name == 'doExercise' && item.meta.permissionList == 'homework'">
									课后作业/布置作业/自动收取/分析作业数据/反馈作业结果
								</p>
							</div>
						</div>
					</a>
				</div>
			</a-col>
		</a-row>
	</div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import { filterOption } from '@/utils/base.js';
import { menuList } from '@/utils/enumeration.js';
export default {
	name: 'home',
	components: {},
	data() {
		return {
			filterOption,
			mixTopMenu: [],
			menus: [],
			selectkey: {},
			subjectList: [],
			classList: [],
			startClassInfo: {
				className: '',
				classId: '',
				subjectCode: '',
				subjectName: '',
				gradeId: '',
				gradeName: '',
				title: '',
				csId: '',
				//"topicType": 0,
				deptId: '',
				testQuestId: null,
				//"tabType": "1",
				topicId: '',
				machId: '',
				alias: '', //接收器别名
				online: 0,
				isOnClass: 0,
				statusRev: 0,
			},
			showTips: false,
			loading: false,
			menuList: menuList,
			currentKey: 'tempAnswer',
			oldcurrentKey: 'tempAnswer',
		};
	},
	computed: {
		...mapState({
			// 动态主路由
			mainMenu: (state) => state.permission.routers,
			activePage: (state) => state.activePage,
			userInfo: (state) => state.user.userinfo || {},
			deviceType: (state) => state.websockStore.deviceType,
			isPro: (state) => state.isPro,
			globalOrg: (state) => state.globalOrg,
		}),
	},
	watch: {
		activePage(newval, oldval) {
			if (newval != oldval) {
				//this.changTab(this.activePage);
			}
		},

		globalOrgId: {
			handler(newval, oldval) {
				if (newval && newval != oldval) {
					this.$nextTick(() => {});
				}
			},
			immediate: true, //刷新加载 立马触发一次handler
			deep: true,
		},
	},
	created() {
		this.getAllMenu();
		this.getUserInfo();
	},
	methods: {
		...mapMutations([]),
		...mapActions(['Logout', 'GetInfo']),
		//获取所有菜单
		getAllMenu() {
			this.menus = [...this.mainMenu];
			this.mixTopMenu = this.mainMenu.filter((item) => !item.hidden && item.meta.title != '首页');
			if (this.mainMenu && this.mainMenu.length > 0) {
				let mainMenu = this.mainMenu.filter((item) => !item.hidden);
				this.selectkey = mainMenu[0];
				//this.changTab(this.selectkey);
			}
			/* 如果没有菜单。提示账户没有权限 */
			if (this.menus.length == 0) {
				this.$message.error('你还没有分配权限，请联系管理员');
			}
			this.$nextTick(() => {
				var container = document.querySelector('.content'); //替换你的dom元素
				if (container && container.scrollHeight > 300) {
					//500是你的dom元素高度
					container.scrollTop = 300;
				}
			});
		},
		getUserInfo() {
			this.$postAction(this.$api.getUserInfo).then((da) => {
				let data = da.data;
				this.$ls.set('userInfo', data);
				this.GetInfo(data);
			});
		},
		//跳转页面
		async skipPage(item) {
			console.log('模块跳转' + JSON.stringify(item));
			this.$ls.set('selectModule', item);
			let parameter = {
				path: item.path,
				name: item.name,
			};
			this.topicType = 0;
			let testType = 0;
			this.skipRoute = {
				...parameter,
			};
			this.$router.push({
				name: item.name,
				params: {
					...parameter,
				},
			});
		},
	},
	beforeDestroy() {
		document.body.classList.remove('HomeLayout');
	},
};
</script>

<style lang="less" scoped>
.homepage {
}

.banner-con {
	padding: 20px 0;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	.banner {
		width: 100%;
		height: 260px;
	}
	.banner_txt {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: auto;
		height: 50px;
		margin-top: 16px;
	}
}

.mod-item {
	background: linear-gradient(180deg, rgb(247, 250, 255), rgb(241, 246, 255) 49.618%, rgb(236, 239, 255) 100%);
	height: 182px;
	padding: 0 29px;
	border: 1px solid transparent;
	transition: all 0.3s;
	margin-bottom: 20px;

	.icon {
		margin-top: 40px;
		width: 100px;
	}

	.title {
		color: rgb(38, 47, 89);
		font-family: Roboto;
		font-size: 26px;
		font-weight: 700;
		line-height: 30px;
		letter-spacing: 0px;
		margin-bottom: 14px;
	}

	p {
		color: rgba(46, 36, 36, 0.7);
		font-family: Roboto;
		font-size: 16px;
		font-weight: 400;
		line-height: 30px;
		letter-spacing: 1px;

		@media screen and (max-width: 1680px) {
			line-height: 25px;
		}
	}

	&:hover {
		transform: translateY(-4px);
		// border: 1px solid @primary-color;
		box-shadow: 0px 4px 8px rgba(19, 29, 53, 0.05);

		.title {
			// color: @primary-color;
		}

		p {
			color: rgba(0, 190, 197, 0.7);
		}
	}
}
</style>
